<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/digit.js"></script>
		<style type="text/css">
			div {
				display: block;
				margin: auto;
				text-align: center;
			}
		</style>
	</head>

	<body>
		<script>
			window.onload = function() {
				var canvas = document.getElementById('canvas');
				var cxt = canvas.getContext("2d");
				r = 5;
				x = 50;
				y = 150;

				window.setInterval(function() {
					cxt.clearRect(0, 0, canvas.width, canvas.height);
					var today = new Date();
					var h = today.getHours();
					var m = today.getMinutes();
					var s = today.getSeconds();
					var s1 = Math.floor(s % 10);
					var s10 = Math.floor(s / 10);
					var m1 = Math.floor(m % 10);
					var m10 = Math.floor(m / 10);
					var h1 = Math.floor(h % 10);
					var h10 = Math.floor(h / 10);
					var colors = ['#33ff11','#ff00ff','#000000','#999999',
					'#999011','#ff0000','#fff000','#bb33dd','#5609ff','#bFb0ff'];
					digit(s1, 43*2*r);
					digit(s10, 36*2*r);
					digit(h1, 7*2*r);
					digit(h10, 0);
					digit(m1,25*2*r);
					digit(m10, 18*2*r);
					addcolon(14*2*r);
					addcolon(32*2*r);
					
					function addcolon(dis){
						for(i = 0; i < 10; i++) {
									for(j = 0; j < 4; j++) {
										if(colon[i][j] == 1) {
											cxt.beginPath();
											cxt.fillStyle = "dodgerblue";
											cxt.arc(dis + x + 2 * r * j, y + 2 * r * i, r, 0, 2 * Math.PI);
											cxt.fill();
											cxt.closePath();
										}
									}
								}
					}
					function digit(time, dis) {
						switch(time) {
							case 0:
								for(i = 0; i < 10; i++) {
									for(j = 0; j < 7; j++) {
										if(n0[i][j] == 1) {
											cxt.beginPath();
											cxt.fillStyle = colors[Math.floor(Math.random()*10)];
											cxt.arc(dis + x + 2 * r * j, y + 2 * r * i, r, 0, 2 * Math.PI);
											cxt.fill();
											cxt.closePath();
										}
									}
								}
								break;

							case 1:
								for(i = 0; i < 10; i++) {
									for(j = 0; j < 7; j++) {
										if(n1[i][j] == 1) {
											cxt.beginPath();
											cxt.fillStyle = colors[Math.floor(Math.random()*10)];
											cxt.arc(dis + x + 2 * r * j, y + 2 * r * i, r, 0, 2 * Math.PI);
											cxt.fill();
											cxt.closePath();
										}
									}
								}
								break;

							case 2:
								for(i = 0; i < 10; i++) {
									for(j = 0; j < 7; j++) {
										if(n2[i][j] == 1) {
											cxt.beginPath();
											cxt.fillStyle = colors[Math.floor(Math.random()*10)];
											cxt.arc(dis + x + 2 * r * j, y + 2 * r * i, r, 0, 2 * Math.PI);
											cxt.fill();
											cxt.closePath();
										}
									}
								}
								break;

							case 3:
								for(i = 0; i < 10; i++) {
									for(j = 0; j < 7; j++) {
										if(n3[i][j] == 1) {
											cxt.beginPath();
											cxt.fillStyle = colors[Math.floor(Math.random()*10)];
											cxt.arc(dis + x + 2 * r * j, y + 2 * r * i, r, 0, 2 * Math.PI);
											cxt.fill();
											cxt.closePath();
										}
									}
								}
								break;

							case 4:
								for(i = 0; i < 10; i++) {
									for(j = 0; j < 7; j++) {
										if(n4[i][j] == 1) {
											cxt.beginPath();
											cxt.fillStyle = colors[Math.floor(Math.random()*10)];
											cxt.arc(dis + x + 2 * r * j, y + 2 * r * i, r, 0, 2 * Math.PI);
											cxt.fill();
											cxt.closePath();
										}
									}
								}
								break;

							case 5:
								for(i = 0; i < 10; i++) {
									for(j = 0; j < 7; j++) {
										if(n5[i][j] == 1) {
											cxt.beginPath();
											cxt.fillStyle = colors[Math.floor(Math.random()*10)];
											cxt.arc(dis + x + 2 * r * j, y + 2 * r * i, r, 0, 2 * Math.PI);
											cxt.fill();
											cxt.closePath();
										}
									}
								}
								break;

							case 6:
								for(i = 0; i < 10; i++) {
									for(j = 0; j < 7; j++) {
										if(n6[i][j] == 1) {
											cxt.beginPath();
											cxt.fillStyle = colors[Math.floor(Math.random()*10)];
											cxt.arc(dis + x + 2 * r * j, y + 2 * r * i, r, 0, 2 * Math.PI);
											cxt.fill();
											cxt.closePath();
										}
									}
								}
								break;

							case 7:
								for(i = 0; i < 10; i++) {
									for(j = 0; j < 7; j++) {
										if(n7[i][j] == 1) {
											cxt.beginPath();
											cxt.fillStyle =colors[Math.floor(Math.random()*10)];
											cxt.arc(dis + x + 2 * r * j, y + 2 * r * i, r, 0, 2 * Math.PI);
											cxt.fill();
											cxt.closePath();
										}
									}
								}
								break;

							case 8:
								for(i = 0; i < 10; i++) {
									for(j = 0; j < 7; j++) {
										if(n8[i][j] == 1) {
											cxt.beginPath();
											cxt.fillStyle = colors[Math.floor(Math.random()*10)];
											cxt.arc(dis + x + 2 * r * j, y + 2 * r * i, r, 0, 2 * Math.PI);
											cxt.fill();
											cxt.closePath();
										}
									}
								}
								break;

							case 9:
								for(i = 0; i < 10; i++) {
									for(j = 0; j < 7; j++) {
										if(n9[i][j] == 1) {
											cxt.beginPath();
											cxt.fillStyle = colors[Math.floor(Math.random()*10)];
											cxt.arc(dis + x + 2 * r * j, y + 2 * r * i, r, 0, 2 * Math.PI);
											cxt.fill();
											cxt.closePath();
										}
									}
								}
								break;
						}
					}
				}, 200);
			}
		</script>
		<canvas id="canvas" width=800; height=600; style="border: 1px solid brown; display:block;"> </canvas>
	</body>

</html>